{extend name="common/base"}
{block name="content"}
    <div style="padding: 15px;">
        <fieldset class="layui-elem-field layui-field-title">
        <legend>后台面板组</legend>
    </fieldset>

        <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="11">网站设置</li>
                <li lay-id="22">用户管理</li>
                <li lay-id="33">权限分配</li>
                <li lay-id="44">商品管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
            </div>
        </div>
        <div class="site-demo-button" style="margin-bottom: 0;">
            <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
        </div>
    </div>
{/block}
{block name="extend_js"}
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        $('.site-demo-active').on('click', function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
        });
    });
</script>
{/block}